import React from 'react';

import router from '../../../utils/routerDecorator';
import {get, post} from '../../../logic/api';
import ObjectList from '../../components/ObjectList';

import styles from './main.less';
import Check from './Check';
import Edit from './Edit';
import Del from './Del';

@router('/site/pubedit')
export default class Pubedit extends React.Component {

  state = {
  }
  
  componentWillMount(){ 
  }

  async fetchData(current, pageSize, filters, sorter){
    var ret = await post('/admin/pub/publist/' + current + "/" + pageSize, {
      filters:filters?JSON.stringify(filters):"{}"
    });
    return ret;
  }

  genOperations(){
    return [{
      title:<div className = {styles.OperationsTitle}>
        <span className = {styles.OperationsTitleText}>操作</span>
        <span><Edit text = "新建" fetchData = {()=>{
          return {
            data:{
              type:"lookbook",
              tag:[],
              top:[],
              etitle:" ",
              ctitle:" ",
              headimage:" ",
              headimagesmall:" ",
              summary:" ",
              params_price:" ",
              params_time:" ",
              params_servicetype:" ",
              params_serviceflow:" ",
              params_note:" ",
              content:"[]",
              goodslinks:[]
            }
          }
        }} record = {{id:0}} typeEnabled reload = {()=>{
          ObjectList.Emitter.emit("reload");
        }}/></span>
      </div>,
      width:'25%', 
      render: (text, record) => {
        return <span className = {styles.operations}>
          <Edit record= {record} reload = {()=>{
            ObjectList.Emitter.emit("reload");
          }}/>
          <Del record = {record} reload = {()=>{
            ObjectList.Emitter.emit("reload");
          }}/>
          <Check record = {record}/>
        </span>
      }
    }]
  }

  genColumns(){
    var typesExchange = {
      lookbook:'lookbook',
      discover:'发现',
      service:'服务',
      topic:'话题',
      class:'课程'
    }

    var statusExchange = {
      unchecked:'未审核',
      checked:'已审核'
    }

    return [
      {width:'3%'},
      {title:'发布ID', dataIndex:'id', width:'3%'},
      {title:'置顶', dataIndex:'top', render:((top)=>{
        return <div style = {{color:'red'}}>
          {top?"是":""}
        </div>
      })},
      {title:'缩略图', width:'10%', dataIndex:'headimage', render:(hash) => {
        return <img src = {"http://oalpta27j.bkt.clouddn.com/"+hash} style ={{width:50}}></img>
      }},
      {title:'发布类型', dataIndex:'type', width: '10%', render:(type) => (typesExchange[type]?typesExchange[type]:type), filters:[
        {text:'画册', value:'lookbook'},
        {text:'发现', value:'discover'},
        {text:'服务', value:'service'},
        {text:'话题', value:'topic'},
        {text:'课程', value:'class'},
      ]},
      {title:'审核状态', dataIndex:'status', width:'10%', render:(status) => (statusExchange[status]?statusExchange[status]:status), filters:[
        {text:'未审核', value:'unchecked'},
        {text:'已审核', value:'checked'}
      ]},
      {title:'英文标题', dataIndex:'etitle', width:'10%'},
      {title:'中文标题', dataIndex:'ctitle', width:'10%'},
      {title:'发布时间', dataIndex:'createdAt', width:'15%'},
    ].concat(this.genOperations());
  }
  
  render(){

    return <div>
      <ObjectList 
        columns = {this.genColumns()}
        fetchData = {this.fetchData}
      />
      
    </div>
  }
}